import React from 'react';
import { Button, Image, Toast } from 'antd-mobile';
import { Doc } from '@/type/HomeTyoe';
import useFollow from '@/hooks/useFollow';
import {followLikeDoctor} from '@/store/modules/homeStore';
import { useEnhanceDispatch } from '@/hooks';
import './DoctorCard.scss';


interface DoctorCartProps {
  doctor: Doc;
}

const DoctorCard: React.FunctionComponent<DoctorCartProps> = ({ doctor }) => {
const enhanceDispatch = useEnhanceDispatch()
  const { handleFollow, message, loading } = useFollow();
  /**
   * @description 点击关注按钮的回调函数
   * */
  const follow = async () => {
    const like = doctor.likeFlag === 1 ? 0 : 1;
    await handleFollow({ type: 'doc', id: doctor.id }, like);
    enhanceDispatch(followLikeDoctor({id:doctor.id,like}));
    Toast.show({ icon: 'success', content: message.current });
  };
  return (
    <div className="doctor-card">
      <Image src={doctor.avatar} />
      <p className="name">{doctor.name}</p>
      <p className="ellipsis-single">{doctor.hospitalName} {doctor.depName}</p>
      <p>{doctor.positionalTitles}</p>
      <Button loading={loading} color="primary" onClick={follow}>{doctor.likeFlag === 1 ? '已关注' : '+关注'}</Button>
    </div>
  );
};

export default DoctorCard;